<template>
  <div class='cba'>
    <div class="nba-left">
      <div class="nav">
        <div class="left">
          <a v-for='(item,index) in main1' :key='index' :href='keyUrl+item.url'>{{item.title}}</a>
        </div>
        <div class="right">
          <swiper :options="swiperOption" ref="mySwiper" class="c-swiper" v-if="banner.length>0">
            <swiper-slide v-for='(item,index) in banner' :key='index'>
              <a :href="keyUrl+item.url">
                <div class="page">
                  <img :src="keyUrl+(item.image.replace('-lp',''))" alt="">
                  <span>{{item.title}}</span>
                </div>
              </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
           <div class="swiper-button-next" slot="button-next"></div>
          </swiper>

        </div>
      </div>
      <div class="content-wrap">
        <div class="box">
          <div class="tit">
            <span>精彩图文</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getCBAPic"}}' class="more">更多>></router-link>
          </div>
          <div class="img-wrap">
            <div class="item" v-for='(item,index) in pics' :key='index'>
              <a :href="keyUrl+item.url">
                <img :src="keyUrl+item.image" alt="">
                <span>{{item.title}}</span>
              </a>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="tit">
            <span>最新新闻</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getCBANews"}}' class="more">更多>></router-link>
          </div>
          <div class="ul-box">
            <div class="item">
              <ul>
                <li v-for='(item,index) in news.slice(0,5)' :key='index'><a  :href="keyUrl+item.url">{{item.title}}</a></li>
              </ul>
            </div>
          
            <div class="item">
              <ul>
                <li v-for='(item,index) in news.slice(5,10)' :key='index'><a  :href="keyUrl+item.url">{{item.title}}</a></li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li v-for='(item,index) in news.slice(10,15)' :key='index'><a  :href="keyUrl+item.url">{{item.title}}</a></li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li v-for='(item,index) in news.slice(15,20)' :key='index'><a  :href="keyUrl+item.url">{{item.title}}</a></li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li v-for='(item,index) in news.slice(20,25)' :key='index'><a  :href="keyUrl+item.url">{{item.title}}</a></li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li v-for='(item,index) in news.slice(25,30)' :key='index'><a :href="keyUrl+item.url">{{item.title}}</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nba-right">
      <h3>热点专题</h3>
      <ul>
        <li v-for='(item,index) in main2' :key='index'><a :href="keyUrl+item.url">
          <img :src="keyUrl+item.image">
          <p>{{item.title}}</p>
        </a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { getCBABanner,getCBAMain,getCBAPic,getCBANews} from '@/request/api'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: { //swiper3
          autoplay: {
            delay: 1500,
            disableOnInteraction: true
          },
          observeParents: true,
          observer: true,
          speed: 1000,
          loop: true,
          watchOverflow: false,
          speed: 1000,
          //direction: 'vertical',
          //mousewheel: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        banner:[],
        main1:[],
        main2:[],
        pics:[],
        news:[]
      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {

    },
    created(){
      getCBABanner().then((v)=>{
        let data = v.data;
        this.banner = data;
      })
      getCBAMain().then((v)=>{
        let data = v.data;
        this.main1 = data.slice(0,12);
        this.main2 = data.slice(12,17);
      })
      getCBAPic().then((v)=>{
        let data = v.data;
        this.pics = data.slice(0,8);
      })
      getCBANews().then((v)=>{
        let data = v.data;
        this.news = data;
      })
      
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      //this.swiper.slideTo(0, 555000, false)
    }
  };

</script>

<style lang='scss' scoped>
  .cba {
    width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .nav {
      width: 100%;
      display: flex;

      .left {
        display: flex;
        flex-direction: column;
        font-size: 13px;
        font-family: Microsoft YaHei;
        color: rgba(63, 63, 63, 1);
        line-height: 28px;
        margin-right: 40px;
        
        a:nth-of-type(1) {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(197, 34, 21, 1);
        }
        a{
          width: 325px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        a:hover{
          color: rgba(197, 34, 21, 1);
        }
      }

      .right {
        .c-swiper {
          width: 590px;
          height: 326px;

          .page {

            img {
              width: 100%;
              height: 100%;
            }

            span {
              width: 100%;
              height: 40px;
              line-height: 40px;
              background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
              position: absolute;
              z-index: 99;
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
              width: 96%;
              padding: 0 2%;
              left: 0;
              bottom: 0;
            }
          }
        }
      }
    }

    .box {
      /*width: 860px;*/
      display: flex;
      flex-direction: column;
      margin: 20px 40px 10px 0;

      .tit {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 28px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(63, 63, 63, 1);
        padding-bottom: 20px;

        .more {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(63, 63, 63, 1);
          cursor: pointer;
          &:hover{
            color:#c52215;
          }
        }
      }

      .img-wrap {
        display: flex;
        justify-content:flex-start;
        flex-wrap: wrap;

        .item {
          position: relative;
          margin-bottom: 10px;
          margin-right: 10px;

          img {
            width: 204px;
            height: 118px;
          }

          span {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0;
            height: 25px;
            width:184px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 25px;
            background: rgba(0,0,0,0.5);
            padding: 0 10px;

          }
        }
      }

      .ul-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        div.item.zl {
          display: flex;

          .left {
            position: relative;
            width: 140px;
            height: 114px;
            margin-right: 10px;

            .bg {
              width: 140px;
              height: 114px;
            }

            .zl-img {
              width: 44px;
              height: 20px;
              position: absolute;
              top: 0;
              right: 0;
            }
          }

          .right {
            width: 160px;
            display: flex;
            flex-direction: column;
            h3{
              font-size: 13px;
              color: #3F3F3F;
              font-weight: bold;
            }
            span {
              font-size: 13px;
              font-family: Microsoft YaHei;
              font-weibold: 400;
              color: #999;
            }

            p {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weboldt: 400;
              color:#999;
              padding-top: 10px;
            }
          }
        }

        div.item {
          width: 310px;
          margin-right: 14px;
          margin-bottom: 15px;
          li {
            list-style: inside;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: rgba(63, 63, 63, 1);
            line-height: 24px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            a:hover{
              color:#c52215;
            }
          }
        }
        div.item:nth-child(3n){
          margin-right: 0;
        }
      }
    }
  }
  .nba-right{
    width: 208px;
    h3{
      font-size:16px;
      color: #000;
      font-weight: bold;
    }
    li a{
      display: block;
      margin-top: 10px;
      img{
        width: 201px;
        height: 146px;
        margin: 8px 0;
      }
      p{
        font-size: 13px;
        color: #3F3F3F;
        text-align: center;
      }
      &:hover{
        p{
          color: #c52215
        }
      }
    }
  }
</style>
